import React from 'react';
import { View, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { useThemeColors, UI, Navigation } from '@gaozh1024/rn-toolkit';

type CenterModalParams = {
    title?: string;
    width?: number | string;
    closable?: boolean;
    maskClosable?: boolean;
    maskColor?: string;
};

const CenterModal: React.FC<any> = ({ route }) => {
    const colors = useThemeColors();
    const params: CenterModalParams = route?.params || {};
    const {
        title = '中心弹窗',
        width = '90%',
        closable = true,
        maskClosable = true,
        maskColor = 'rgba(0,0,0,0.45)',
    } = params;

    const close = () => Navigation.goBack();
    // const close = () => Navigation.closeModal();

    const styles = StyleSheet.create({
        overlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.2)' },
        mask: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: maskColor },
        card: {
            width: typeof width === 'number' ? width : '90%',
            borderRadius: 12,
            borderWidth: 1,
            borderColor: colors.border,
            backgroundColor: colors.surface,
            padding: 16,
        },
    });

    return (
        <View style={styles.overlay} testID="center_modal">
            <View style={styles.card}>
                <UI.Text variant="h3" color="text" mb={8} style={{ textAlign: 'center' }}>{title}</UI.Text>
                <UI.Text variant="body2" color="text">这是一个中心弹窗内容区域。</UI.Text>
                <UI.Text variant="caption" color="subtext" mt={4}>titleAlign=center，closable/maskClosable 可配置。</UI.Text>

                {closable && (
                    <UI.Button title="关闭" onPress={close} fullWidth mt={12} variant="outline" />
                )}
            </View>
        </View>
    );
};

export default CenterModal;